<template>
  <div class="hello">
    <h2 v-show="getList.length!=0">购物车</h2>
      
 <div v-for="(v,index) in getList" :key="index" class="item">
        <img :src="v.avaUrl" alt="" @click="detail(v)">
        <!-- <p>{{v.pname}}</p>
        <p>{{v.price}}</p> -->
        <p>{{v.name}}</p>
        <p>{{v.phone}}</p>
        <button @click="jian(v)">-</button>
        <input type="text" v-model.number="v.count" @change="change(v)">
        <button @click="add(v)">+</button>
    </div>





  <h1>一共 {{getAllCount}}件商品</h1>

    <h2 v-show="getList.length==0">购物车空空</h2>
     
  </div>
</template>

<script>
 import { MessageBox } from 'mint-ui';
export default {
 
  name: "Gouwuche",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      
    };
  },
  methods: {
      jian(v){
        if(v.count<=1){
          MessageBox.confirm('确定删除吗?').then(action => {
               this.$store.commit("jian",v)
          }).catch(e=>{});
        }else{
          this.$store.commit("jian",v)
        }
         
      },
      add(v){
          this.$store.commit("jia",v)  
      },
      change(v){
        if(v.count>200){
          v.count = 200;
           this.$store.commit("change",v)  
        }
      }
  },
  computed: {
     getList(){
       //  获取state中的数据
       return this.$store.state.list;
     },
     getAllCount(){
      //  获取getters中的数据
       return this.$store.getters.allCount;
     }
     
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item{
  display: flex;
}
.item img{
   width: 20%;
  
}
.hello{
  margin-top: 50px;

}
input{
  width: 40%;
 
}
</style>